<template>
  <a-layout-header :style="nightMode?'':{background:'#ffffff'}" style="height:95px;line-height:95px;padding: 0;" class="shadow">
    <a-row type="flex" justify="space-between" class="body-container">
      <a-col :xxl="3" :xl="3" :lg="3" :md="6"  :sm="8" :xs="6">
        <div class="logo">
          <img :src="nightMode?blackLogo:whiteLogo" alt="小魔人-wwww.xiaomoren.com">
        </div>
      </a-col>
      <a-col :xxl="20" :xl="20" :lg="20" :md="18" :sm="16" :xs="8" >
        <a-row justify="space-between">
          <a-col :span="18" class="left-menu" :sm="18"  :xs="0">
            <a-row type="flex" justify="start" :gutter="32">
              <a-col v-for="(it,key) in leftMenuList" :key="key">
                <a-tooltip placement="bottom" >
                  <template slot="title">
                    <span>{{ it.name  }}</span>
                  </template>
                  <router-link :to="{path:it.path}"><i v-if="it.icon" class="zs-icon" :class="it.icon"></i>{{ it.name  }}</router-link>
                </a-tooltip>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="6" :sm="6"  :xs="24">
            <a-row type="flex" justify="end" :gutter="{ xs: 8, sm: 8, md: 24}">
              <a-col v-for="(item,key) in rightIconMenuList" :key="key">
                <a-tooltip placement="bottom" >
                  <template slot="title">
                    <span>{{ item.name  }}</span>
                  </template>
                  <router-link :to="{path:item.path}"><i class="zs-icon" :class="item.icon"></i></router-link>
                </a-tooltip>
                </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </a-layout-header>
</template>

<script>
  import blackLogo from '@assets/images/logo-black.png';
  import whiteLogo from '@assets/images/logo-white.png';
	export default {
		name: 'Header',

		components: {},

		props: {
			nightMode:{
				type: Boolean,
        default: false,
      }
    },
		data() {
			return {
        blackLogo: blackLogo,
        whiteLogo: whiteLogo,
        rightIconMenuList: [
          {
          	icon: 'zs-yueliang',
            name: '夜晚模式',
            path: '#',
          },
	        {
		        icon: 'zs-search',
		        name: '搜索',
		        path: '#1',
	        },
	        {
		        icon: 'zs-post',
		        name: '投稿',
		        path: '#2',
	        },
        ],
        leftMenuList: [
          {
          	icon: 'zs-home',
          	name: '首页',
            path: '/',
            child: [],
          },
	        {
		        icon: '',
		        name: '24H新鲜事',
		        path: '#24',
		        child: [],
	        },
	        {
		        icon: '',
		        name: '专题',
		        path: '#zhuanti',
		        child: [],
	        },
	        {
		        icon: '',
		        name: 'It速递',
		        path: '#it',
		        child: [],
	        },
        ],
      }
		},

		computed: {},

		watch: {},

		created() {
		},

		mounted() {
		},

		destroyed() {
		},

		methods: {}
	}
</script>
<style  lang="scss">
</style>
<style scoped lang="scss">
  .logo{
    img{
      width:100%;
      height: 100%;
    }
  }
  @media only screen and (max-width: 584px){
    .logo{
      width: 170px;
    }
  }
  .zs-icon{
    font-size: 20px;
  }
  .left-menu{

    a{
      font-size: 17px;
    }
    i{
      margin-right: 5px;

    }
  }
</style>
